<template>
    <div  class="file-popup" >
        <el-popover :width="800"  trigger="click"  v-model:visible="showPopup" :hide-after="0" >
            <template #reference>
                <Sort class="sort-icon"  />
            </template>

            <!-- 文件传输列表 -->
            <div class="file-transfer-list" > 
                <!-- 左侧文件名称 -->
                <div class="left-list">
                    <div>传输列表</div>
                    <div class="left-text">
                        <el-menu
                            @select="selectMenu"
                            default-active="1"
                        >
                            <el-menu-item index="1">
                                <span>文件上传({{tableData.length}})</span>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <span>文件下载(0)</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <!-- <el-divider direction="vertical" style="height: 100%;" /> -->
                <!-- 右侧文件列表 -->
                <div class="right-list">
                    <div v-if="currentIndex==='1'">上传完成({{tableData.length}}/0)</div>
                    <div v-else-if="currentIndex==='2'">文件下载(0/0)</div>
                    <div style="display: flex;flex-direction: column;">
                        <el-table 
                            :data="tableData" 
                            style="width: 100%;" 
                            v-show="tableData.length>0" 
                            @row-click="handleClick"
                        >
                            <el-table-column prop="file.name">
                                <template #default="{ row }">
                                    <Folder v-if="getFileType(row.file.name)===3"/>
                                    <Image v-else-if="getFileType(row.file.name)===4" />
                                    <Video v-else-if="getFileType(row.file.name)===5" />
                                    <Document v-else-if="getFileType(row.file.name)===6" />
                                    <Audio v-else-if="getFileType(row.file.name)===7" />
                                    <Other v-else-if="getFileType(row.file.name)===8" />
                                    <span>{{ row.file.name }}</span>
                                    <el-progress 
                                        :percentage="row.progress" 
                                        :status="row.status === 'done' ? 'success' : undefined"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="right-text">- 仅展示本次上传任务 -</div>
                    </div>
                    
                </div>   

            </div>
        </el-popover>
    </div>
</template>

<script setup lang="ts">
import Folder from '@/components/icons/Folder.vue'
import Document from '@/components/icons/Document.vue'
import Image from '@/components/icons/Image.vue'
import Video from '@/components/icons/Video.vue'
import Audio from '@/components/icons/Audio.vue'
import Other from '@/components/icons/Other.vue'
import { ref ,onMounted,computed} from 'vue'
import {fileStore} from '@/stores/disk/file'
import { getFileType } from '@/utils/disk/file'
const store = fileStore()

// 文件传输列表数据
const tableData = computed(()=>{
    return store.state.uploadList
})

const showPopup = computed({
  get: () => store.state.showPopup,
  set: (value) => store.updateShowPopup(value)
})
//选择菜单
const currentIndex = ref('');
function selectMenu(index: string) {
    currentIndex.value = index
}

const handleClick = (row: any) => {
    console.log(row)
}

//加载
onMounted(() => {
    selectMenu('1')
})
</script>

<style scoped>
.file-popup{
    margin-left: 500px;
}
.sort-icon{
    width: 1em; 
    height: 1em;
    margin-right: 8px;
    outline: none;
    cursor: pointer;
    border: 1px solid #0e0d0d;
    border-radius: 20px;
    padding: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.file-transfer-list{
    height: 400px;
    display: flex;
}
.left-list{
    width: 30%;
    .left-text{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        span{
            margin: 10px;
        }
    }
}
.right-list{
    width: 70%;
    overflow-y: auto;
    overflow-x: hidden;
    .right-text{
        margin-left: 200px;
    }
}
</style>    